<template>
	<view class="muu-fullscreen-loading" :class="config.style" @touchmove.stop.prevent="moveHandle" v-if="loading">
		<view class="load-modal">
			<view class="spinner">
				<view class="bounce bounce1"></view>
				<view class="bounce bounce2"></view>
				<view class="bounce bounce3"></view>
			</view>
			<view class="gray-text">加载中...</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'FullscreenLoading',
		props: {
			loading: true,
			config: {}
		},
		data() {
			return {
				width: 0,
				height: 0
			};
		},
		created() {
			const systemInfo = uni.getSystemInfoSync();
			this.width = systemInfo.windowWidth
			this.height = systemInfo.windowHeight
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" >
	.muu-fullscreen-loading {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		z-index: 999;
	}
	.load-modal {
		position: fixed;
		top:40%;
		left:50%;
		transform: translate(-50%,-50%);
		text-align: center;
		.spinner {
			
		}
		.spinner>.bounce {
			width: 26rpx;
			height: 26rpx;
			background-color: #ff6600;
			border-radius: 50%;
			display: inline-block;
			-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
			animation: bouncedelay 1.4s infinite ease-in-out;
			/* Prevent first frame from flickering when animation starts */
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
		}

		.spinner .bounce1 {
			-webkit-animation-delay: -0.32s;
			animation-delay: -0.32s;
		}

		.spinner .bounce2 {
			-webkit-animation-delay: -0.16s;
			animation-delay: -0.16s;
		}

		@-webkit-keyframes bouncedelay {
			0%,
			80%,
			100% {
				-webkit-transform: scale(0.0)
			}
			40% {
				-webkit-transform: scale(1.0)
			}
		}

		@keyframes bouncedelay {
			0%,
			80%,
			100% {
				transform: scale(0.0);
				-webkit-transform: scale(0.0);
			}
			40% {
				transform: scale(1.0);
				-webkit-transform: scale(1.0);
			}
		}
		.gray-text {
			color: #999;
			margin-top: 20px;
			font-size: 12px;
		}
	}
	
	/*页面风格设计*/
	.Blue {
		.load-modal {
			.spinner>.bounce {
				width: 26rpx;
				height: 26rpx;
				background-color: $Blue;
			}
		}
	}
	.Green {
		.load-modal {
			.spinner>.bounce {
				width: 26rpx;
				height: 26rpx;
				background-color: $Green;
			}
		}
	}
	.LightRed {
		.load-modal {
			.spinner>.bounce {
				width: 26rpx;
				height: 26rpx;
				background-color: $LightRed;
			}
		}
	}
	.Orange {
		.load-modal {
			.spinner>.bounce {
				width: 26rpx;
				height: 26rpx;
				background-color: $Orange;
			}
		}
	}
	.LightPink {
		.load-modal {
			.spinner>.bounce {
				width: 26rpx;
				height: 26rpx;
				background-color: $LightPink;
			}
		}
	}
	.Magenta {
		.load-modal {
			.spinner>.bounce {
				width: 26rpx;
				height: 26rpx;
				background-color: $Magenta;
			}
		}
	}
</style>
